<template>
  <div class="admin-dashboard">
    <h1>管理员仪表盘</h1>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card shadow="hover" class="dashboard-card">
          <template #header>
            <div class="card-header">
              <span>用户总数</span>
            </div>
          </template>
          <div class="card-content">
            <div class="card-value">{{ userCount }}</div>
            <div class="card-desc">注册用户总数</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="dashboard-card">
          <template #header>
            <div class="card-header">
              <span>定制订单</span>
            </div>
          </template>
          <div class="card-content">
            <div class="card-value">{{ orderCount }}</div>
            <div class="card-desc">总定制订单数</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="dashboard-card">
          <template #header>
            <div class="card-header">
              <span>设计师</span>
            </div>
          </template>
          <div class="card-content">
            <div class="card-value">{{ designerCount }}</div>
            <div class="card-desc">平台设计师数量</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="dashboard-card">
          <template #header>
            <div class="card-header">
              <span>本月收入</span>
            </div>
          </template>
          <div class="card-content">
            <div class="card-value">¥{{ income }}</div>
            <div class="card-desc">本月平台总收入</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mt-20">
      <el-col :span="12">
        <el-card shadow="hover" class="chart-card">
          <template #header>
            <div class="card-header">
              <span>订单统计</span>
            </div>
          </template>
          <div class="chart-container">
            <!-- 订单统计图表将在这里显示 -->
            <div class="chart-placeholder">订单统计图表</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover" class="chart-card">
          <template #header>
            <div class="card-header">
              <span>收入趋势</span>
            </div>
          </template>
          <div class="chart-container">
            <!-- 收入趋势图表将在这里显示 -->
            <div class="chart-placeholder">收入趋势图表</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mt-20">
      <el-col :span="24">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>最近订单</span>
              <el-button type="text">查看全部</el-button>
            </div>
          </template>
          <el-table :data="recentOrders" style="width: 100%">
            <el-table-column prop="orderNo" label="订单编号" width="180" />
            <el-table-column prop="userName" label="用户名" width="120" />
            <el-table-column prop="clothingType" label="服装类型" width="120" />
            <el-table-column prop="budget" label="预算" width="120" />
            <el-table-column prop="submitTime" label="提交时间" width="180" />
            <el-table-column prop="status" label="状态">
              <template #default="scope">
                <el-tag :type="getStatusType(scope.row.status)">{{ scope.row.statusText }}</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'AdminDashboard',
  data() {
    return {
      userCount: 128,
      orderCount: 56,
      designerCount: 15,
      income: 25680,
      recentOrders: [
        {
          orderNo: 'CUS20230001',
          userName: '张三',
          clothingType: '衬衫',
          budget: '¥1200',
          submitTime: '2023-04-01 10:30:00',
          status: 1,
          statusText: '已接单'
        },
        {
          orderNo: 'CUS20230002',
          userName: '李四',
          clothingType: '西装',
          budget: '¥3500',
          submitTime: '2023-04-01 14:20:00',
          status: 2,
          statusText: '设计中'
        },
        {
          orderNo: 'CUS20230003',
          userName: '王五',
          clothingType: '连衣裙',
          budget: '¥2200',
          submitTime: '2023-04-02 09:15:00',
          status: 3,
          statusText: '生产中'
        },
        {
          orderNo: 'CUS20230004',
          userName: '赵六',
          clothingType: '外套',
          budget: '¥1800',
          submitTime: '2023-04-02 16:40:00',
          status: 0,
          statusText: '待处理'
        },
        {
          orderNo: 'CUS20230005',
          userName: '孙七',
          clothingType: '裤子',
          budget: '¥980',
          submitTime: '2023-04-03 11:25:00',
          status: 0,
          statusText: '待处理'
        }
      ]
    }
  },
  mounted() {
    // 在这里可以获取实际数据
    this.fetchDashboardData()
  },
  methods: {
    fetchDashboardData() {
      // 这里应该调用API获取实际数据
      console.log('获取仪表盘数据')
    },
    getStatusType(status) {
      const statusMap = {
        0: 'info',    // 待处理
        1: 'success', // 已接单
        2: 'warning', // 设计中
        3: 'primary', // 生产中
        4: 'success', // 已完成
        5: 'danger'   // 已取消
      }
      return statusMap[status] || 'info'
    }
  }
}
</script>

<style scoped>
.admin-dashboard {
  padding: 20px;
}

.dashboard-card {
  height: 150px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-content {
  text-align: center;
  padding: 10px 0;
}

.card-value {
  font-size: 28px;
  font-weight: bold;
  color: #409EFF;
  margin-bottom: 5px;
}

.card-desc {
  font-size: 14px;
  color: #909399;
}

.chart-card {
  height: 350px;
}

.chart-container {
  height: 280px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.chart-placeholder {
  color: #909399;
  font-size: 16px;
}

.mt-20 {
  margin-top: 20px;
}
</style> 